import React, { useState } from 'react'
import './index.css'

import { Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
import axios from 'axios'
import { Rate } from 'antd';
import youzi from '../../../static/img/Search and Particulars/youzi.png'
import cz from '../../../static/img/Search and Particulars/chengzi.png'
export default function Orderevaluate() {
    //上传第一个商品的照片组件
        const [fileList, setFileList] = useState([
          {
            uid: '-1',
            name: 'image.png',
            status: 'done',
            url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          },
        ]);
      
        const onChange = ({ fileList: newFileList }) => {
          setFileList(newFileList);
        };
      
        const onPreview = async file => {
          let src = file.url;
          if (!src) {
            src = await new Promise(resolve => {
              const reader = new FileReader();
              reader.readAsDataURL(file.originFileObj);
              reader.onload = () => resolve(reader.result);
            });
          }
          const image = new Image();
          image.src = src;
          const imgWindow = window.open(src);
          imgWindow.document.write(image.outerHTML);
        };
           //上传第二个商品的照片组件
           const [fileList2, setFileList2] = useState([
            {
              uid: '-1',
              name: 'image.png',
              status: 'done',
              url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            },
          ]);
        
          const onChange2 = ({ fileList: newFileList }) => {
            setFileList2(newFileList);
          };
        
          const onPreview2 = async file => {
            let src = file.url;
            if (!src) {
              src = await new Promise(resolve => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj);
                reader.onload = () => resolve(reader.result);
              });
            }
            const image = new Image();
            image.src = src;
            const imgWindow = window.open(src);
            imgWindow.document.write(image.outerHTML);
          };
      //第一个商品评价
      const [start1,setstart1] = useState(0)
      //第二个商品评价
      const [start2,setstart2] = useState(0)
      //服务评价
      const [start3,setstart3] = useState(0)
      //描述评价
      const [start4,setstart4] = useState(0)
     function nowstar1(value){
       console.log(value);
       setstart1(value)
     }
     function nowstar2(value){
       setstart2(value)
      }
      function nowstar3(value){
       setstart3(value)
      }
      function nowstar4(value){
       setstart4(value)
      }
      //提交
      function subinfor(){
          const evaluate1 = document.getElementsByClassName('o_evaluate')[0].value
          const evaluate2 = document.getElementsByClassName('o_evaluate')[1].value

          const infor = { goods1:start1,evaluate1,goods2:start2,evaluate2 ,servestart:start3,describe:start4}
          console.log(infor);
        //   console.log(evaluate1,evaluate2);
         axios.post('',infor).then((res)=>{
             console.log(res);
         })
      }
    return (
        <div>
            <h3 className='tt'>订单评价</h3>
            <div className="O-middle">
               <div className="o_left">
                   <div className="o-evaluateimg">
                       <img src={youzi} alt="" />
                       <p>珍享 南非进口红心葡萄柚 西柚柚子 </p>
                   </div>
               </div>
               <div className="o-middle">
                   <p>商品评分</p>
                   <p>评价商品</p>
                   <p>晒图片</p>
               </div>
               <div className="o-right">
                   <p><Rate  onChange={nowstar1} /></p>
                   <textarea contenteditable="true" className="o_evaluate" placeholder="你想说些什么"  maxlength="50" ></textarea>
                   <ImgCrop rotate>
                    <Upload
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        listType="picture-card"
                        fileList={fileList}
                        onChange={onChange}
                        onPreview={onPreview}
                    >
                        {fileList.length < 5 && '+ Upload'}
                    </Upload>
                </ImgCrop>
               </div>
               <hr className='xuxian' ></hr>
               <div className="o_left">
                   <div className="o-evaluateimg">
                       <img src={cz} alt="" />
                       <p>珍享 南非进口红心葡萄柚 西柚柚子 </p>
                   </div>
               </div>
               <div className="o-middle">
                   <p>商品评分</p>
                   <p>评价商品</p>
                   <p>晒图片</p>
               </div>
               <div className="o-right">
                   <p><Rate  onChange={nowstar2} /></p>
                   <textarea contenteditable="true" className="o_evaluate" placeholder="你想说些什么"  maxlength="50" ></textarea>
                   <ImgCrop rotate>
                    <Upload
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        listType="picture-card"
                        fileList={fileList2}
                        onChange={onChange2}
                        onPreview={onPreview2}
                    >
                        {fileList2.length < 5 && '+ Upload'}
                    </Upload>
                </ImgCrop>
               </div>
               <hr className='xuxian' ></hr>
               <div className="fwtd">
                   <span>服务态度&nbsp; &nbsp;&nbsp;<Rate  onChange={nowstar3} /></span>
               </div>
               <div className="msxf">
                   <span>描述相符&nbsp; &nbsp;&nbsp;<Rate  onChange={nowstar4}/></span>
               </div>
               <div className="tjpj" onClick={subinfor}>提交评价</div>
            </div>
            
        </div>
    )
}
